From 63f1a6780bab85ebb48ca1fc142cc6beaf772faa Mon Sep 17 00:00:00 2001
From: Adam Soltys <asoltys@gmail.com>
Date: Mon, 3 Oct 2022 23:13:49 -0700
Subject: refactoring

---
 src/routes/[username]/+layout.svelte               |   7 +
 src/routes/[username]/+page.svelte                 |   4 +-
 src/routes/[username]/customers/+page.svelte       |   5 -
 src/routes/[username]/dashboard/+page.svelte       |   4 +-
 src/routes/[username]/receive/+page.server.js      |  12 ++
 src/routes/[username]/receive/+page.svelte         | 231 ++-------------------
 src/routes/[username]/settings/+page.svelte        |   4 +-
 src/routes/[username]/settings/_account.svelte     |  25 +--
 src/routes/[username]/settings/_pos.svelte         |   1 -
 src/routes/[username]/settings/_security.svelte    |  12 +-
 src/routes/[username]/support/+page.svelte         | 103 +++++----
 .../[username]/transactions/[...page]/+page.svelte |   9 +-
 12 files changed, 111 insertions(+), 306 deletions(-)
 create mode 100644 src/routes/[username]/+layout.svelte
 create mode 100644 src/routes/[username]/receive/+page.server.js

(limited to 'src/routes/[username]')

diff --git a/src/routes/[username]/+layout.svelte b/src/routes/[username]/+layout.svelte
new file mode 100644
index 00000000..b2efa894
--- /dev/null
+++ b/src/routes/[username]/+layout.svelte
@@ -0,0 +1,7 @@
+<script>
+	import { AppHeader } from '$comp';
+	export let data;
+</script>
+
+<AppHeader {data} />
+<slot />
diff --git a/src/routes/[username]/+page.svelte b/src/routes/[username]/+page.svelte
index d1b6d223..5eab4ad2 100644
--- a/src/routes/[username]/+page.svelte
+++ b/src/routes/[username]/+page.svelte
@@ -1,7 +1,7 @@
 <script>
 	import { browser } from '$app/environment';
 	import { onMount } from 'svelte';
-	import { AppHeader, Icon, PageNotFound } from '$comp';
+	import { Icon, PageNotFound } from '$comp';
 	import { subject, user } from '$lib/store';
 	import { copy } from '$lib/utils';
 	import { t } from '$lib/translations';
@@ -35,8 +35,6 @@
 	let followed = false;
 </script>
 
-<AppHeader />
-
 <div class="flex xl:block justify-center items-center my-20 px-3">
 	<div class="space-y-10 xl:space-y-0">
 		<div class="xl:ml-[calc(15vw-64px)] space-y-2 w-full md:w-72">
diff --git a/src/routes/[username]/customers/+page.svelte b/src/routes/[username]/customers/+page.svelte
index 1935b156..e69de29b 100644
--- a/src/routes/[username]/customers/+page.svelte
+++ b/src/routes/[username]/customers/+page.svelte
@@ -1,5 +0,0 @@
-<script>
-	import { AppHeader } from '$comp';
-</script>
-
-<AppHeader />
diff --git a/src/routes/[username]/dashboard/+page.svelte b/src/routes/[username]/dashboard/+page.svelte
index 1e55867d..c017fdc0 100644
--- a/src/routes/[username]/dashboard/+page.svelte
+++ b/src/routes/[username]/dashboard/+page.svelte
@@ -1,7 +1,7 @@
 <script>
 	import { f, s, post, failure, sats } from '$lib/utils';
 	import { tick } from 'svelte';
-	import { AppHeader, Icon } from '$comp';
+	import { Icon } from '$comp';
 	import { rate, selectedRate } from '$lib/store';
 	import { goto } from '$app/navigation';
 	import { t } from '$lib/translations';
@@ -43,8 +43,6 @@
 	$: accountBalanceSats = s(user.account.balance);
 </script>
 
-<AppHeader avatarPosition="left-[calc(50vw-64px)] lg:left-[calc(15vw-64px)]" />
-
 <div class="text-center mx-auto lg:text-left lg:mx-0 lg:ml-[calc(15vw-64px)] mt-20 w-full md:w-72">
 	<h2 class="text-3xl font-semibold">{user.username}</h2>
 
diff --git a/src/routes/[username]/receive/+page.server.js b/src/routes/[username]/receive/+page.server.js
new file mode 100644
index 00000000..8d523213
--- /dev/null
+++ b/src/routes/[username]/receive/+page.server.js
@@ -0,0 +1,12 @@
+import { auth, post } from '$lib/utils';
+
+export const actions = {
+	default: async ({ cookies, request, parent }) => {
+		let { rate, user } = await parent();
+		let invoice = Object.fromEntries(await request.formData());
+		invoice.rate = rate;
+
+		let { uuid } = await post('/invoice', { invoice, user }, auth(cookies));
+		throw redirect(303, `/invoice/${uuid}`);
+	}
+};
diff --git a/src/routes/[username]/receive/+page.svelte b/src/routes/[username]/receive/+page.svelte
index f79e2df5..3c65279d 100644
--- a/src/routes/[username]/receive/+page.svelte
+++ b/src/routes/[username]/receive/+page.svelte
@@ -1,216 +1,29 @@
 <script>
-	import { AppHeader, Icon } from '$comp';
-	import { goto } from '$app/navigation';
-	import { invoiceAmount, invoiceAmountFiat, selectedRate, user } from '$lib/store';
-	import { f, s, post, warning, sats } from '$lib/utils';
-	import { page } from '$app/stores';
+	import { Icon, Numpad } from '$comp';
 	import { t } from '$lib/translations';
+	import { enhance } from '$app/forms';
 
-	let useFiat = true;
-	let amountFiat = 0;
-	let amountSats = 0;
-	let loading = false;
+	export let data;
+	let amount;
 
-	$: amount = parseInt(useFiat ? Math.round(amountFiat / ($selectedRate / sats)) : amountSats);
-
-	$: $invoiceAmount = parseInt(!amountSats ? amountFiat / ($selectedRate / sats) : amountSats);
-
-	$: $invoiceAmountFiat = parseInt(
-		amountFiat === 0 ? amountSats * ($selectedRate / sats) : amountFiat
-	);
-
-	$: amountSatsFormatted = s(amountSats);
-
-	$: amountFiatConverted = f(amountSats * ($selectedRate / sats), $user.currency);
-
-	$: amountSatsConverted = s(amountFiat / ($selectedRate / sats));
-
-	const numPad = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '.', '0', '<'];
-
-	const handleInput = (value) => {
-		if (useFiat) {
-			if (amountFiat === 0 && value !== '.' && value !== '<' && value !== '0') {
-				amountFiat = value;
-			} else if ((amountFiat === 0 || amountFiat === '0') && value === '0') {
-				return;
-			} else if (amountFiat === 0 && value === '.') {
-				amountFiat = '0.';
-			} else if (amountFiat !== 0 && amountFiat.includes('.') && value === '.') {
-				return;
-			} else if (value === '<') {
-				if (amountFiat !== 0) {
-					amountFiat = amountFiat.slice(0, amountFiat.length - 1);
-					if (amountFiat.length === 0) {
-						amountFiat = 0;
-						amountSats = 0;
-					}
-				}
-			} else if (value !== '.' && value !== '<' && parseInt(amountFiat + value) > $selectedRate) {
-				warning($t('user.receive.lessThan1BTCWarning'));
-			} else if (amountFiat !== 0 && amountFiat.match(/\.../)) {
-				return;
-			} else {
-				amountFiat = amountFiat + value;
-			}
-		} else {
-			if (value === '.') {
-				return;
-			} else if (!amountSats && value !== '<' && value !== '0') {
-				amountSats = parseInt(value);
-			} else if (value === '<') {
-				if (amountSats !== 0) {
-					amountSats = Math.floor(amountSats / 10);
-					if (amountSats.length === 0) {
-						amountSats = 0;
-						amountFiat = 0;
-					}
-				}
-			} else if (value !== '<' && parseInt(amountSats + value) > sats) {
-				warning($t('user.receive.lessThan1BTCWarning'));
-			} else {
-				amountSats = parseInt(amountSats + value);
-			}
-		}
-	};
-
-	let submit = async () => {
-		loading = true;
-		let { uuid } = await post('/invoice', {
-			amount,
-			rate: $selectedRate,
-			prompt: true,
-			username: $page.params.username
-		});
-		goto(`/invoice/${uuid}`);
-	};
+	let { currency } = data.user;
 </script>
 
-{#if $user}
-	<AppHeader />
-
-	<div class="flex justify-center items-center mt-24 mb-3 px-3">
-		{#if $selectedRate}
-			<div class="space-y-5">
-				<!-- amounts -->
-				<div class="text-center">
-					<div class="text-5xl md:text-6xl font-semibold tracking-widest mb-1">
-						{useFiat
-							? `${
-									$user.currency === 'USD' ||
-									$user.currency === 'CAD' ||
-									$user.currency === 'AUD' ||
-									$user.currency === 'NZD' ||
-									$user.currency === 'MXN' ||
-									$user.currency === 'BRL' ||
-									$user.currency === 'HKD' ||
-									$user.currency === 'TWD'
-										? '$'
-										: $user.currency === 'JPY' || $user.currency === 'CNY'
-										? '¥'
-										: $user.currency === 'GBP'
-										? '£'
-										: $user.currency === 'EUR'
-										? '€'
-										: $user.currency === 'KRW'
-										? '₩'
-										: ''
-							  }${amountFiat}`
-							: amountSatsFormatted}<span class="tracking-normal text-base font-normal"
-							>{useFiat ? $user.currency : 'SAT'}</span
-						>
-					</div>
-					<span class="text-secondary mr-1"
-						>{useFiat ? `${amountSatsConverted} SAT` : amountFiatConverted}</span
-					>
-					<button
-						on:click={() => {
-							if (useFiat) {
-								amountSats = parseInt((amountFiat / ($selectedRate / sats)).toFixed(0));
-							} else {
-								amountFiat =
-									(amountSats * ($selectedRate / sats)).toFixed(2) > 0.0
-										? (amountSats * ($selectedRate / sats)).toFixed(2)
-										: 0;
-							}
-							useFiat = !useFiat;
-						}}><Icon icon="swap" style="inline hover:opacity-80" /></button
-					>
-				</div>
-
-				<!-- numpad -->
-				<div class="grid grid-cols-3 gap-2 w-full md:w-[300px] mx-auto">
-					{#each numPad as value}
-						{#if value === '<'}
-							<button
-								class="bg-primary rounded-xl py-4 px-8 font-semibold active:bg-black active:text-white flex justify-center items-center hover:opacity-80"
-								on:click={() => handleInput(value)}
-							>
-								<svg
-									class="w-5"
-									width="24"
-									height="24"
-									viewBox="0 0 24 24"
-									fill="none"
-									xmlns="http://www.w3.org/2000/svg"
-								>
-									<path
-										d="M15 19L8 12L15 5"
-										stroke="currentColor"
-										stroke-width="2"
-										stroke-linecap="round"
-										stroke-linejoin="round"
-									/>
-								</svg>
-							</button>
-						{:else}
-							<button
-								class="bg-primary rounded-xl py-4 px-8 font-semibold active:bg-black active:text-white hover:opacity-80"
-								on:click={() => handleInput(value)}>{value}</button
-							>
-						{/if}
-					{/each}
-				</div>
-
-				<div class="space-y-3 w-full md:w-[300px] mx-auto">
-					<button
-						class="bg-black text-white rounded-xl w-full h-[48px] flex justify-center items-center font-semibold {$invoiceAmount ===
-							0 || loading
-							? 'opacity-50'
-							: 'opacity-100 hover:opacity-80'}"
-						on:click={submit}
-						disabled={$invoiceAmount === 0 || loading}
-					>
-						{#if loading}
-							<svg
-								class="mx-auto h-6 w-6 animate-spin text-white"
-								xmlns="http://www.w3.org/2000/svg"
-								fill="none"
-								viewBox="0 0 24 24"
-							>
-								<circle
-									class="opacity-25"
-									cx="12"
-									cy="12"
-									r="10"
-									stroke="currentColor"
-									stroke-width="4"
-								/>
-								<path
-									class="opacity-75"
-									fill="currentColor"
-									d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
-								/>
-							</svg>
-						{:else}
-							<Icon icon="qr" style="mr-2" /> {$t('user.receive.showQR')}
-						{/if}
-					</button>
-				</div>
-			</div>
-		{:else}
-			<div
-				class="w-full md:w-[300px] h-[475px] md:h-[485px] animate-pulse bg-gray-400 rounded-xl"
-			/>
-		{/if}
+<form method="POST" class="flex justify-center items-center mt-24 mb-3 px-3" use:enhance>
+	<input type="hidden" name="amount" value={amount} />
+	<input type="hidden" name="prompt" value="true" />
+
+	<div class="space-y-3 w-full md:w-[300px] mx-auto">
+		<Numpad bind:amount bind:currency />
+		<button
+			type="submit"
+			class="bg-black text-white rounded-xl w-full h-[48px] flex justify-center items-center font-semibold {!amount
+				? 'opacity-50'
+				: 'opacity-100 hover:opacity-80'}"
+			disabled={!amount}
+		>
+			<Icon icon="qr" style="mr-2" />
+			{$t('user.receive.showQR')}
+		</button>
 	</div>
-{/if}
+</form>
diff --git a/src/routes/[username]/settings/+page.svelte b/src/routes/[username]/settings/+page.svelte
index 978f537a..410ed1bf 100644
--- a/src/routes/[username]/settings/+page.svelte
+++ b/src/routes/[username]/settings/+page.svelte
@@ -3,7 +3,7 @@
 	import Pos from './_pos.svelte';
 	import Security from './_security.svelte';
 
-	import { AppHeader, Icon } from '$comp';
+	import { Icon } from '$comp';
 	import { t } from '$lib/translations';
 	import { failure, success, put } from '$lib/utils';
 	import { user, avatarUpload, bannerUpload } from '$lib/store';
@@ -35,8 +35,6 @@
 	};
 </script>
 
-<AppHeader />
-
 <form on:submit|preventDefault={save} class="mb-[154px]">
 	<div class="mt-24 mb-20 px-3 md:px-0 w-full md:w-[400px] mx-auto space-y-8">
 		<h1 class="text-center text-3xl md:text-4xl font-semibold mb-10">
diff --git a/src/routes/[username]/settings/_account.svelte b/src/routes/[username]/settings/_account.svelte
index ff7676f4..8a20df43 100644
--- a/src/routes/[username]/settings/_account.svelte
+++ b/src/routes/[username]/settings/_account.svelte
@@ -1,13 +1,6 @@
 <script>
 	import { tick } from 'svelte';
-	import {
-		user,
-		colorTheme,
-		rates,
-		tempProfileFiles,
-		avatarUpload,
-		bannerUpload
-	} from '$lib/store';
+	import { colorTheme, tempProfileFiles, avatarUpload, bannerUpload } from '$lib/store';
 	import { Icon, Toggle, LocaleSelector } from '$comp';
 	import { t } from '$lib/translations';
 	import { upload } from '$lib/upload';
@@ -58,7 +51,7 @@
 		}
 	};
 
-	$: $user.password = $user.confirm = password;
+	$: user.password = user.confirm = password;
 </script>
 
 <div>
@@ -69,13 +62,13 @@
 <!-- TODO
 <div>
 	<label for="email" class="font-bold mb-1 block">{$t('user.settings.email')}</label>
-	<input type="email" name="email" bind:value={$user.email} />
+	<input type="email" name="email" bind:value={user.email} />
 </div> -->
 
 <!-- TODO fix breaking changes when user updates this field -->
 <div>
 	<label for="username" class="font-bold mb-1 block">{$t('user.settings.username')}</label>
-	<input disabled type="text" name="username" bind:value={$user.username} />
+	<input disabled type="text" name="username" bind:value={user.username} />
 </div>
 
 <div class="relative">
@@ -96,7 +89,7 @@
 
 <div>
 	<label for="address" class="font-bold mb-1 block">{$t('user.settings.businessAddress')}</label>
-	<input type="text" name="address" bind:value={$user.address} />
+	<input type="text" name="address" bind:value={user.address} />
 </div>
 
 <!-- TODO -->
@@ -133,13 +126,13 @@
 					class="absolute w-full h-full object-cover object-center visible overflow-hidden"
 				/>
 			</div>
-		{:else if $user.profile}
+		{:else if user.profile}
 			<div
 				class="relative rounded-full overflow-hidden text-center w-20 h-20 my-auto hover:opacity-80 cursor-pointer"
 				on:click={() => select('profile')}
 			>
 				<img
-					src={`/api/public/${$user.username}-profile.png`}
+					src={`/api/public/${user.username}-profile.png`}
 					class="absolute w-full h-full object-cover object-center visible overflow-hidden"
 				/>
 			</div>
@@ -183,9 +176,9 @@
 			class="w-full object-cover object-center visible overflow-hidden h-48 mb-4 hover:opacity-80"
 			on:click={() => select('banner')}
 		/>
-	{:else if $user.banner}
+	{:else if user.banner}
 		<img
-			src={`/api/public/${$user.username}-banner.png`}
+			src={`/api/public/${user.username}-banner.png`}
 			class="w-full object-cover object-center visible overflow-hidden h-48 mb-4 hover:opacity-80"
 			on:click={() => select('banner')}
 		/>
diff --git a/src/routes/[username]/settings/_pos.svelte b/src/routes/[username]/settings/_pos.svelte
index 3310e426..edf54d91 100644
--- a/src/routes/[username]/settings/_pos.svelte
+++ b/src/routes/[username]/settings/_pos.svelte
@@ -1,5 +1,4 @@
 <script>
-	import { rates, user } from '$lib/store';
 	import { Icon, Toggle } from '$comp';
 	import { t } from '$lib/translations';
 	import { success, failure, put } from '$lib/utils';
diff --git a/src/routes/[username]/settings/_security.svelte b/src/routes/[username]/settings/_security.svelte
index 1b8fb125..3c0009dc 100644
--- a/src/routes/[username]/settings/_security.svelte
+++ b/src/routes/[username]/settings/_security.svelte
@@ -32,7 +32,7 @@
 			if (setting2fa && token.length === 6) {
 				await put('/enable2fa', { token });
 				success('2FA enabled');
-				$user.twofa = 1;
+				user.twofa = 1;
 				toggleEnabling();
 			}
 		} catch (e) {
@@ -46,7 +46,7 @@
 			if (disabling2fa && token.length === 6) {
 				await put('/disable2fa', { token });
 				success('2FA disabled');
-				$user.twofa = 0;
+				user.twofa = 0;
 				toggleDisabling();
 			}
 		} catch (e) {
@@ -54,7 +54,7 @@
 		}
 	};
 
-	$: otpUri = `otpauth://totp/coinos:${$user.username}?secret=${$user.otpsecret}&period=30&digits=6&algorithm=SHA1&issuer=coinos`;
+	$: otpUri = `otpauth://totp/coinos:${user.username}?secret=${user.otpsecret}&period=30&digits=6&algorithm=SHA1&issuer=coinos`;
 </script>
 
 <!-- TODO
@@ -66,7 +66,7 @@
 	{#if settingPin}
 		<div class="flex my-4">
 			<div class="mx-auto">
-				<Pincode bind:code bind:value={$user.pin} bind:this={pinInput}>
+				<Pincode bind:code bind:value={user.pin} bind:this={pinInput}>
 					<PincodeInput />
 					<PincodeInput />
 					<PincodeInput />
@@ -110,7 +110,7 @@
 
 		<div class="text-center my-4">
 			{$t('user.settings.accountId')}<br />
-			<b>{$user.otpsecret}</b>
+			<b>{user.otpsecret}</b>
 		</div>
 
 		<div class="text-center my-4">
@@ -136,7 +136,7 @@
 				<PincodeInput />
 			</Pincode>
 		</div>
-	{:else if $user.twofa}
+	{:else if user.twofa}
 		<button type="button" class="primary" on:click={toggleDisabling}>
 			<Icon icon="mobile" style="mr-1" />
 			{$t('user.settings.twofaDisable')}
diff --git a/src/routes/[username]/support/+page.svelte b/src/routes/[username]/support/+page.svelte
index 663ba8a6..796f72ec 100644
--- a/src/routes/[username]/support/+page.svelte
+++ b/src/routes/[username]/support/+page.svelte
@@ -1,65 +1,58 @@
 <script>
-	// this needs to be hooked up to the backend
-	import { AppHeader } from '$comp';
-	import { user } from '$lib/store';
 	import { t } from '$lib/translations';
 	let email;
 	let message;
 </script>
 
-{#if $user}
-	<AppHeader />
+<div class="mt-24 mb-20">
+	<h1 class="text-center text-3xl md:text-4xl font-semibold mb-10">
+		{$t('user.support.header')}
+	</h1>
 
-	<div class="mt-24 mb-20">
-		<h1 class="text-center text-3xl md:text-4xl font-semibold mb-10">
-			{$t('user.support.header')}
-		</h1>
+	<form class="space-y-5 mx-auto w-11/12 md:w-[350px]">
+		<div>
+			<label for="email" class="font-semibold">{$t('user.support.email')}</label>
+			<input
+				class="block border rounded-xl p-2 w-full"
+				type="email"
+				name="email"
+				bind:value={email}
+				required
+			/>
+		</div>
 
-		<form class="space-y-5 mx-auto w-11/12 md:w-[350px]">
-			<div>
-				<label for="email" class="font-semibold">{$t('user.support.email')}</label>
-				<input
-					class="block border rounded-xl p-2 w-full"
-					type="email"
-					name="email"
-					bind:value={email}
-					required
-				/>
-			</div>
+		<div>
+			<label for="account" class="font-semibold">{$t('user.support.accountName')}</label>
+			<input
+				class="block border rounded-xl p-2 w-full"
+				type="text"
+				name="account"
+				required
+				disabled
+				value={user.username}
+			/>
+		</div>
 
-			<div>
-				<label for="account" class="font-semibold">{$t('user.support.accountName')}</label>
-				<input
-					class="block border rounded-xl p-2 w-full"
-					type="text"
-					name="account"
-					required
-					disabled
-					value={$user.username}
-				/>
-			</div>
+		<div>
+			<label for="message" class="font-semibold">{$t('user.support.message')}</label>
+			<textarea
+				rows={5}
+				class="block border rounded-xl p-2 w-full"
+				type="text"
+				name="message"
+				bind:value={message}
+				required
+			/>
+		</div>
 
-			<div>
-				<label for="message" class="font-semibold">{$t('user.support.message')}</label>
-				<textarea
-					rows={5}
-					class="block border rounded-xl p-2 w-full"
-					type="text"
-					name="message"
-					bind:value={message}
-					required
-				/>
-			</div>
-
-			<button
-				disabled={!email || !message}
-				class="{!email || !message
-					? 'opacity-50'
-					: 'opacity-100'} bg-black text-white font-bold rounded-xl py-3 w-full mx-auto {email &&
-				message
-					? 'hover:opacity-80'
-					: ''}">{$t('user.support.send')}</button
-			>
-		</form>
-	</div>
-{/if}
+		<button
+			disabled={!email || !message}
+			class="{!email || !message
+				? 'opacity-50'
+				: 'opacity-100'} bg-black text-white font-bold rounded-xl py-3 w-full mx-auto {email &&
+			message
+				? 'hover:opacity-80'
+				: ''}">{$t('user.support.send')}</button
+		>
+	</form>
+</div>
diff --git a/src/routes/[username]/transactions/[...page]/+page.svelte b/src/routes/[username]/transactions/[...page]/+page.svelte
index a3e6850a..223418a3 100644
--- a/src/routes/[username]/transactions/[...page]/+page.svelte
+++ b/src/routes/[username]/transactions/[...page]/+page.svelte
@@ -1,5 +1,4 @@
 <script>
-	import { AppHeader } from '$comp';
 	import { newPayment } from '$lib/store';
 	import { t } from '$lib/translations';
 	import { f, s, sats } from '$lib/utils';
@@ -15,8 +14,6 @@
 	$: data && ({ page, pages, total, transactions } = data);
 </script>
 
-<AppHeader />
-
 <div class="mt-24 mb-20">
 	<h1 class="px-3 md:px-0 text-center text-3xl md:text-4xl font-semibold mb-10">
 		{$t('user.transactions.header')}
@@ -27,7 +24,9 @@
 			{#if pages.length > 1}
 				{#each pages as _, i}
 					<a href={`/${user.username}/transactions/${i + 1}`} class:active={page === i + 1}>
-						<div class="border py-2 px-4 rounded-full border-2 w-12 h-12 hover:opacity-80 mr-1 text-center my-auto">
+						<div
+							class="border py-2 px-4 rounded-full border-2 w-12 h-12 hover:opacity-80 mr-1 text-center my-auto"
+						>
 							{i + 1}
 						</div>
 					</a>
@@ -76,6 +75,6 @@
 
 <style>
 	.active div {
-    @apply bg-gray-100;
+		@apply bg-gray-100;
 	}
 </style>
-- 
cgit v1.2.3